<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<div id="tabContent" style="min-height: 500px;">

	<div id="OfferListDiv">
		<div style="float: left; width: 100%;padding: 10px 0px 20px 0px;">
			<span class="font-header" style="text-align: left;">Offer Item Setup: List View</span>			
			<div style="margin: 10px 0px" class="instruction-sub-text">
				Create your offer items here and assign them to category.
			</div>			
		</div>		
		<div style="float: left;">
			<div>
				<div class="arrow-bullet" style="float: left;margin-top: 8px;">&nbsp;</div>
				<div style="float: left;width: 85px;">Add a Offer</div>
				<div style="width: 685px;border-bottom: 1px solid #55648f;margin-top:-10px;float: left;">&nbsp;</div>
			</div>
			
		</div>
		
		<div style="clear: both;"></div>
		<div id="addOfferDiv" style="float: right;margin-top: 0px;">
			<input class="btnClass" onclick="createNewOffer();"
				id="btnAddOffer" name="btnAddOffer" type="button" value="Add New Offer"/>
		</div>		
		<div style="padding: 5px 0px" class="instruction-sub-text">
			Add more Offer or modify existing below offer items.
		</div>
		<div style="clear: both;"></div>
		<div class="report-header-label"
			style="text-align: left; padding-left: 10px; margin-top: 20px;">
			All Offer(s):
		</div>
		<div style="clear: both;"></div>
		<div id="divOfferListTableData" >
			<table class="list" width="100%" id="offerListTable">
				<thead>
					<tr>
					<th></th>
					<th>Name</th>
					<th>Description</th>
					<th>Start Date</th>
					<th>End Date</th>
					<th style="width:110px;"></th>
					</tr>
				</thead>
				
				<c:forEach items="${offerList}" var="offer" varStatus="loopIndex">
					<tr class="report-text" offerId="${offer.id}">
						<td style="width: 15px;">${loopIndex.index+1}</td>
						<td style="vertical-align: middle;" valign="top"> ${offer.name}</td>
						<td style="vertical-align: middle;font-weight: normal;" valign="top">${offer.description}</td>
						<td style="vertical-align: middle;font-weight: normal;" valign="top">${offer.displayStartDate}</td>
						<td style="vertical-align: middle;font-weight: normal;" valign="top">${offer.displayEndDate}</td>
						<td style="font-weight: normal;font-family: Arial;color: #0000FF;">
								<span class="delete-offer-link edit-link">Delete</span>
								&nbsp;|&nbsp;
								<span class="view-offer-link edit-link">View/Edit</span>
						</td>
					</tr>
				</c:forEach>
				
			</table>
	</div>
	</div>
</div>
<script>
initOfferTab();	
</script>